<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>zoomEffect jQuery plugin</title>
    <link rel="stylesheet" href="styles/style.css">
    <link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Jura&v1' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
    <h1>maZoom</h1>
    <h2>jQuery Plugin</h2>
    <ul id="info">
        <li><label>Author:</label>Mauro Gadaleta</li>
        <li><label>Twitter:</label><a href="http://twitter.com/index.html#!/zazoomauro">#zazoomauro</a></li>
        <li><label>Version:</label>1.1</li>
        <li><label>Download:</label><a href="http://code.google.com/p/jquery-mazoom/downloads/list">Google Code Download</a></li>
        <li><label>Source Code:</label><a href="http://code.google.com/p/jquery-mazoom/source/browse/">Google Code Subversion</a></li>
        <li><label>Licence:</label>GNU GPL v3</li>
    </ul>
    <ul id="nav">
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#getting_started">Getting Started</a></li>
        <li><a href="#configuration">Configuration</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="#credits">Credits</a></li>
    </ul>
</div>
<div id="introduction">
    <h3>Introduction</h3>
    <p>
        maZoom is a plugin that lets you zoom very large images without pop-ups', modal boxes.<br>All in the same picture!
    </p>
</div>
<div id="getting_started">
    <h3>Getting Started</h3>
    <p>
        To use the maZoom component, include the jQuery library and the maZoom source file inside the <code>&lt;head&gt;</code> tag of your HTML document:
    </p>
<pre>
&lt;script type="text/javascript" src="/path/to/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/path/to/jquery.mazoom.min.js"&gt;&lt;/script&gt;
</pre>
    <p>
        In your HTML file need to create this simple data structure. Example:
    </p>
<pre>
    &lt;div id="photo"&gt;
        &lt;div class="small imgContent"&gt;&lt;img src="path/to/gallery/image_name_little.jpg" >&lt;/div&gt;
        &lt;div class="zoom imgContent"&gt;&lt;img src="path/to/gallery/image_name_bigjpg">&lt;/div&gt;
    &lt;/div&gt;
</pre>
    <p>
        Finally, in your javascript file, we must give those objects the plugin zoomEffect:
    </p>
<pre>
jQuery(document).ready(function(){
    $("#photo").maZoom();
});
</pre>
</div>
<div id="configuration">
    <h3>Configuration</h3>
    <p>
        Supports only two parameters:
        <ul>
            <li>zoomImageWidth</li>
            <li>zoomImageHeight</li>
        </ul>
        Example:
    </p>
<pre>
$(".icon").zoomEffect({
    zoomImageWidth: 2000,
    zoomImageHeight: 1123
});
</pre>
</div>
<div id="examples">
    <h3>Examples</h3>
    <ul>
        <li><a href="examples/sunglass/">¡Sunglass!</a></li>
    </ul>
</div>
<div id="credits">
    <h3>Credits</h3>
    <ul>
        <li>Code Assist: Miguel Angel García (<a href="http://twitter.com/index.html#!/tribadelics" target="_blank">Twitter</a>)</li>
    </ul>
</div>
<div id="footer">
</div>
</body>
</html>